<template>
  <div class="w-full h-10 text-xl p-2 flex">
    <!-- 同心圆 -->
    <div class="w-4 h-4 relative rounded-xl overflow-hidden mr-2 circle" :style="{backgroundColor:color}" />
    <!-- 标题 & 分割线 -->
    <div class="w-full border-b-2 -mt-3" :style="{borderColor:color,color:color}">{{ title }}</div>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from "vue";

const props = defineProps({
  title: {
    type: String,
    default: "这是标题"
  },
  color: {
    type: String,
    default: "#2b8cfa"
  }
});
</script>
<style scoped lang="scss">
.circle::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #ffffff;
}
.circle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #ffffff;
}
</style>
